<template>
  <div>
    <el-container>
      <el-header height="20px">
        <div style="height:20px; font-size: 15px;background-color: rgba(205,205,205,0.2)">
          <div style="float: left; margin-left: 20px">
            <div>系统模块 > 菜单管理</div>
          </div>
        </div>
      </el-header>
      <el-main>
        <el-table
          :data="tableData"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          height="450"
          default-expand-all
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column
            prop="menuName"
            label="名称"
            sortable>
          </el-table-column>
          <el-table-column
            prop="menuUrl"
            label="路径"
            sortable>
          </el-table-column>
          <el-table-column
            label="类型">
            <template slot-scope="scope">
              <span>{{ getMenuType(scope.row.type) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="icon"
            label="图标icon">
          </el-table-column>
          <el-table-column label="操作"
                           align="center"
          >
            <template slot-scope="scope">
              <el-button v-if="scope.row.type ==='01'" @click.native.prevent="addMenu(scope)"
                         type="text"
              >新增下一级
              </el-button>
              <el-button @click.native.prevent="editMenu(scope)"
                         type="text"
              >编辑
              </el-button>
              <el-button @click.native.prevent="deleteMenu(scope,node)"
                         type="text"
              >删除
              </el-button>

            </template>
          </el-table-column>

          <el-button style="float: left;margin-left: 20px" type="text" slot="append" @click="addMenu1()"
                     icon="el-icon-plus"></el-button>
        </el-table>
        <el-dialog
          :before-close="handleClose"
          :title="title"
          :visible.sync="dialogVisible"
          width="50%">
          <div>
            <el-form ref="menu" :model="menu" :inline="true" label-width="85px">
              <el-form-item label="上级id:" prop="parentId">
                <el-input v-model="menu.parentId" disabled></el-input>
              </el-form-item>
              <el-form-item label="上级名称:" prop="parentName">
                <el-input v-model="menu.parentName" disabled></el-input>
              </el-form-item>
              <el-form-item label="菜单Id:" prop="id">
                <el-input v-model="menu.id" disabled></el-input>
              </el-form-item>
              <el-form-item :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]" label="名称:"
                            prop="menuName">
                <el-input v-model="menu.menuName"></el-input>
              </el-form-item>
              <el-form-item :rules="[{ required: true, message: '请选择类型', trigger: 'blur' }]" label="类型:" prop="type">
                <el-select v-model="menu.type">
                  <el-option v-for="item in dict1" :key="item.dictCode" :label="item.dictLabel"
                             :value="item.dictValue"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="路径:" prop="menuUrl">
                <el-input :disabled="menu.type==='02'?false:true" v-model="menu.menuUrl"></el-input>
              </el-form-item>
              <el-form-item label="图标:" prop="icon">
                <el-input v-model="menu.icon"></el-input>
              </el-form-item>
              <el-form-item :rules="[{ required: true, message: '请输入操作排序', trigger: 'blur' },
               { type: 'number', message: '排序必须为数字值'}]" label="排序:"
                            prop="orderNum">
                <el-input v-model.number="menu.orderNum" type="number"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
                    <el-button @click="cancel('role')">取 消</el-button>
                  <el-button type="primary" @click="sureMenu()">确 定</el-button>
                </span>
        </el-dialog>
      </el-main>
    </el-container>

  </div>
</template>

<script>
export default {
  name: "menuModule",
  data() {
    return {
      tableData: [],
      dict1: [],
      dialogVisible: false,
      title: '',
      isShow: true,
      menu: {
        parentId: '',
        parentName: '',
        id: '',
        menuName: '',
        menuUrl: '',
        type: '',
        icon: '',
        orderNum: '',
      }
    }
  },
  mounted() {
    this.getMenuTree()
    this.$getDict('MENUTYPE').then(res => {
      this.dict1 = res
    })
  },
  methods: {
    getMenuTree() {
      this.$axios({
        url: "/menu/getMenuTree",
        method: "get",
      }).then(res => {
        this.tableData = res.data.data
      })
    },
    getMenuType(type) {
      return this.$getDictLabel(type, this.dict1)
    },
    addMenu(scope) {
      this.title = '新增下一级'
      this.menu.parentId = scope.row.id
      this.getMaxOrder(this.menu.parentId)
      this.menu.parentName = scope.row.menuName
      this.dialogVisible = true
    },
    addMenu1() {
      this.title = '新增'
      this.menu.parentId = -1
      this.getMaxOrder(-1)
      this.dialogVisible = true
    },
    getMaxOrder(id) {
      this.$axios({
        url: '/menu/getMaxOrder',
        method: 'get',
        params: {
          id: id,
        }
      }).then(res => {
        this.menu.orderNum = res.data.data
      })
    },
    editMenu(scope) {
      this.title = '修改菜单'
      this.$nextTick(() => {
        this.menu.parentId = scope.row.parentId
        this.menu.id = scope.row.id
        this.menu.menuName = scope.row.menuName
        this.menu.menuUrl = scope.row.menuUrl
        this.menu.type = scope.row.type
        this.menu.icon = scope.row.icon
        this.menu.orderNum = scope.row.orderNum
      })
      this.dialogVisible = true
    },
    deleteMenu(scope) {
      if (scope.row.children != null && scope.row.children.length > 0) {
        this.$message.warning("该节点不能直接删除，请先删除其下级节点！")
      } else {
        this.$confirm('确认删除？')
          .then(_ => {
            this.$axios({
              url: '/menu/deleteMenu',
              method: 'delete',
              params: {id: scope.row.id}
            }).then(res => {
              if (res.data.code === 200) {
                this.$message.success("删除成功！")
                this.getMenuTree()
              } else {
                this.$message.error("操作失败，请联系管理员")
              }
            })
          })
          .catch(_ => {
          });
      }
    },
    handleClose() {
      this.$nextTick(() => {
        this.$refs['menu'].resetFields()
      })
      this.dialogVisible = false
    },
    sureMenu() {
      let url = ''
      if (this.title === '修改菜单') {
        url = '/menu/editMenu'
      } else {
        url = '/menu/addMenu'
      }
      this.$refs['menu'].validate(res => {
          if (res) {
            this.$axios({
              url: url,
              method: 'post',
              data: {
                ...this.menu
              }
            }).then(res => {
              if (res.data.code === 200) {
                this.$nextTick(() => {
                  this.$refs['menu'].resetFields()
                })
                this.getMenuTree()
                this.dialogVisible = false
                this.$message.success("操作成功！")
              } else {
                this.$message.error("系统异常，请联系管理员！")
              }
            })
          }
        }
      )
    }

  },
  watch: {
    'menu.type'(val) {
      if (val === '01') {
        this.menu.menuUrl = ''
      }
    }
  }
}
</script>

<style scoped>

</style>
